<template>
  <div>
    <div v-if="!showEdit" class="container">
      <div class="header">
        <!-- <el-button style="margin-left:30px;" @click.prevent="BatchConfirmation" type="danger" plain size="medium"
            >全部确认</el-button
          > -->
        <div style="margin-left: 30px">
          <lin-search @query="onQueryChange" ref="searchKeyword" />
        </div>
        <div style="margin-left: 30px">
          <el-date-picker
            v-model="value"
            @change="selectTime"
            type="datetimerange"
            start-placeholder="开始采集日期"
            end-placeholder="结束采集日期"
            :default-time="['12:00:00']"
          >
          </el-date-picker>
        </div>
        <div class="title" style="margin-left: 30px">电量:</div>
        <el-select v-model="input.collector_power" placeholder="请选择" style="width: 10%">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <div class="title">温度状态:</div>
        <el-select v-model="input.tresult" placeholder="请选择" style="width: 10%">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <div class="title">湿度状态:</div>
        <el-select v-model="input.hresult" placeholder="请选择" style="width: 10%">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
      <div class="header">
        <div class="title">采集器名称:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门名称:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关名称:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 16px">
          <el-button @click.prevent="queryEdit()" type="success" plain>查询</el-button>
        </div>
        <div style="margin-left: 8px">
          <el-button @click.prevent="ResetEdit()" type="warning" plain>重置</el-button>
        </div>
        <div style="margin-left: 8px">
          <el-button @click.prevent="plusEdit()" icon="el-icon-plus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value1">
        <div class="title">采集器名称:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门名称:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关名称:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(1)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value2">
        <div class="title">采集器名称:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门名称:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关名称:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(2)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value3">
        <div class="title">采集器名称:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门名称:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关名称:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(3)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value4">
        <div class="title">采集器名称:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门名称:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关名称:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(4)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div></div>
      <transition name="fade">
        <div class="search" v-if="keyword">
          <p class="search-tip">
            搜索“<span class="search-keyword">{{ keyword }}</span
            >”， 找到 <span class="search-num">{{ totalNums }}</span> 条信息
          </p>
          <button class="search-back" @click="backInit">返回全部记录</button>
        </div>
      </transition>
      <el-table stripe v-loading="loading" :data="tableData" class="table_1">
        <el-table-column fixed="left" prop="id" label="序号" width="100"></el-table-column>
        <el-table-column
          fixed="left"
          :show-overflow-tooltip="true"
          prop="collector_name"
          label="采集器名称"
          width="200"
        ></el-table-column>
        <el-table-column
          fixed="left"
          :show-overflow-tooltip="true"
          prop="dwmc"
          label="部门名称"
          width="150"
        ></el-table-column>
        <el-table-column
          fixed="left"
          :show-overflow-tooltip="true"
          prop="bgateway_name"
          label="网关名称"
          width="150"
        ></el-table-column>
        <el-table-column fixed="left" prop="c" label="采集器电量(%)" width="150">
          <template slot-scope="scope">
            <el-tag :type="scope.row.collector_power < 50 ? 'warning' : 'success'" disable-transitions
              >{{ scope.row.collector_power }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="left"
          :show-overflow-tooltip="true"
          prop="collector_time"
          label="采集时间"
          width="200"
          sortable
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="tresult"
          label="采集温度结果"
          width="200"
        ></el-table-column>
        <el-table-column prop="tvalue" label="采集温度值(℃)" width="150">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.tvalue < scope.row.tlower ? 'primary' : scope.row.tvalue > scope.row.thigh ? 'danger' : 'info'
              "
              disable-transitions
              >{{ scope.row.tvalue }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="thigh,tlower" label="标准温度范围(℃)" width="200">
          <template slot-scope="scope"> {{ scope.row.tlower }} - {{ scope.row.thigh }} </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="hresult"
          label="采集湿度结果"
          width="200"
        ></el-table-column>
        <el-table-column prop="hvalue" label="采集湿度值(RH%)" width="150">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.hvalue < scope.row.hlower ? 'primary' : scope.row.hvalue > scope.row.hhigh ? 'danger' : 'info'
              "
              disable-transitions
              >{{ scope.row.hvalue }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="hhigh,hlower" label="标准湿度范围(RH%)" width="200">
          <template slot-scope="scope"> {{ scope.row.hlower }} - {{ scope.row.hhigh }} </template>
        </el-table-column>

        <el-table-column width="150" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click.prevent="handleEdit(scope.row)" type="primary" plain size="mini">详情</el-button>
            <!-- <el-button
              v-if="(scope.row.state == '未确认')?true:false"
              v-permission="{ permission: ['确认异常'], type: 'disabled' }"
              @click.prevent="handleDelete(scope.row)"
              type="danger"
              size="mini"
              plain
              >确认</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :background="true"
          :page-size="pageCount"
          :current-page="currentPage"
          v-if="refreshPagination"
          layout="prev, pager, next, jumper"
          :total="totalNums"
        ></el-pagination>
      </div>
    </div>
    <BCollection-edit
      v-else
      @editClose="editClose"
      :BCollectionId="BCollectionId"
      :isCreate="isCreate"
    ></BCollection-edit>
  </div>
</template>

<script>
import LinSearch from '@/component/base/search/lin-search'
import BCollection from '@/model/BCollection'
import BCollectionEdit from './BCollection-edit'

export default {
  components: { LinSearch, BCollectionEdit },
  data() {
    return {
      BCollectionId: null,
      isCreate: false,
      tableData: [],
      showEdit: false,
      totalNums: 0,
      currentPage: 1,
      pageCount: 10,
      refreshPagination: true,
      keyword: null,
      StartTime: '',
      EndTime: '',
      searchKeyword: '',
      plusValue: {
        value1: false,
        value2: false,
        value3: false,
        value4: false,
      }, //增加查询条件-哨值
      putData: {
        state: '已确认',
      },
      value: null,
      input: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
        collector_power: '',
        tresult: '',
        hresult: '',
      },
      input1: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
      },
      input2: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
      },
      input3: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
      },
      input4: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
      },
      options1: [
        {
          value: '10',
          label: '< 10',
        },
        {
          value: '20',
          label: '< 20',
        },
        {
          value: '30',
          label: '< 30',
        },
        {
          value: '40',
          label: '< 40',
        },
        {
          value: '50',
          label: '< 50',
        },
        {
          value: '60',
          label: '< 60',
        },
        {
          value: '70',
          label: '< 70',
        },
        {
          value: '80',
          label: '< 80',
        },
        {
          value: '90',
          label: '< 90',
        },
        {
          value: '',
          label: '所有状态',
        },
      ],
      options2: [
        {
          value: '正常',
          label: '正常',
        },
        {
          value: '超高',
          label: '超高限',
        },
        {
          value: '超低',
          label: '超低限',
        },
        {
          value: '',
          label: '所有状态',
        },
      ],
      options3: [
        {
          value: '正常',
          label: '正常',
        },
        {
          value: '超高',
          label: '超高限',
        },
        {
          value: '超低',
          label: '超低限',
        },
        {
          value: '',
          label: '所有状态',
        },
      ],
    }
  },
  async created() {
    this.loading = true
    this.getBCollections()
    this.loading = false
  },
  watch: {
    // 关键字搜索
    searchKeyword(newVal) {
      if (newVal) {
        this.keyword = newVal
        if (this.value == null) {
          this.StartTime = ''
          this.EndTime = ''
        } else {
          this.StartTime = this.value[0]
          this.EndTime = this.value[1]
        }
        if (this.searchUser) {
          this.keyword = `${newVal}`
        }
      } else {
        this.keyword = ''
        this.$refs.searchKeyword.clear()
      }
      this.searchPage()
    },
    value(newVal) {
      this.searchPage()
    },
  },
  methods: {
    async getBCollections() {
      const page = this.currentPage - 1
      const count = this.pageCount
      const StartTime = this.StartTime
      const EndTime = this.EndTime
      const BCollections = await BCollection.getBCollections(
        {
          StartTime,
          EndTime,
          page,
          count,
          dwmc: this.input.dwmc,
          bgateway_name: this.input.bgateway_name,
          collector_name: this.input.collector_name,
          collector_power: this.input.collector_power,
          tresult: this.input.tresult,
          hresult: this.input.hresult,

          dwmc1: this.input1.dwmc,
          bgateway_name1: this.input1.bgateway_name,
          collector_name1: this.input1.collector_name,
          dwmc2: this.input2.dwmc,
          bgateway_name2: this.input2.bgateway_name,
          collector_name2: this.input2.collector_name,
          dwmc3: this.input3.dwmc,
          bgateway_name3: this.input3.bgateway_name,
          collector_name3: this.input3.collector_name,
          dwmc4: this.input4.dwmc,
          bgateway_name4: this.input4.bgateway_name,
          collector_name4: this.input4.collector_name,
        },
        this.input,
      )
      this.tableData = BCollections.items
      for (var i = 0; i < this.pageCount; i++) {
        const index = this.tableData[i].collector_time.indexOf('T')
        this.tableData[i].collector_time =
          this.tableData[i].collector_time.slice(0, index) +
          ' ' +
          this.tableData[i].collector_time.slice(index + 1, index + 9)
      }
      this.totalNums = BCollections.total
      this.initImgSrcList()
    },
    async searchPage() {
      const page = this.currentPage - 1
      const count = this.pageCount
      const datas = await BCollection.search({
        keyword: this.searchKeyword,
        StartTime: this.StartTime,
        EndTime: this.EndTime,
        page,
        count,
        dwmc: this.input.dwmc,
        bgateway_name: this.input.bgateway_name,
        collector_name: this.input.collector_name,
        collector_power: this.input.collector_power,
        tresult: this.input.tresult,
        hresult: this.input.hresult,

        dwmc1: this.input1.dwmc,
        bgateway_name1: this.input1.bgateway_name,
        collector_name1: this.input1.collector_name,
        dwmc2: this.input2.dwmc,
        bgateway_name2: this.input2.bgateway_name,
        collector_name2: this.input2.collector_name,
        dwmc3: this.input3.dwmc,
        bgateway_name3: this.input3.bgateway_name,
        collector_name3: this.input3.collector_name,
        dwmc4: this.input4.dwmc,
        bgateway_name4: this.input4.bgateway_name,
        collector_name4: this.input4.collector_name,
      })
      this.tableData = datas.items
      this.totalNums = datas.total
      for (var i = 0; i < this.pageCount; i++) {
        const index = this.tableData[i].collector_time.indexOf('T')
        this.tableData[i].collector_time =
          this.tableData[i].collector_time.slice(0, index) +
          ' ' +
          this.tableData[i].collector_time.slice(index + 1, index + 9)
      }
    },
    initImgSrcList() {
      this.tableData.forEach(item => {
        if (!item.img) {
          return
        }
        this.imgSrcList.push(item.img)
      })
    },
    selectTime() {
      if (this.value == null) {
        this.StartTime = ''
        this.EndTime = ''
      } else {
        this.StartTime = this.value[0]
        this.EndTime = this.value[1]
      }
      if (this.keyword == '') {
        this.getBCollections()
      } else {
        this.searchPage()
      }
    },
    async handleCurrentChange(val) {
      this.imgSrcList = []
      this.currentPage = val
      this.loading = true
      if (this.keyword == '') {
        this.getBCollections()
      } else {
        this.searchPage()
      }
      this.loading = false
    },
    handleEdit(val) {
      this.isCreate = false
      this.BCollectionId = `${val.id}`
      this.showEdit = true
    },
    // handleDelete(val) {
    //   this.$confirm('此操作将确认该异常项, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning',
    //   }).then(async () => {
    //     const res = await BCollection.editBCollection(val.id)
    //       if(this.keyword == ""){
    //   this.getBCollections()
    // }else{
    //   this.searchPage()
    // }
    //   })
    // },
    // BatchConfirmation() {  //AllConfirmed
    //   this.$confirm('此操作将全部确认异常项, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning',
    //   }).then(async () => {
    //     await BCollection.AllConfirmed()
    //     if(this.keyword == ""){
    //   this.getBCollections()
    // }else{
    //   this.searchPage()
    // }
    //   })
    // },
    editClose() {
      this.showEdit = false
      if (this.keyword == '') {
        this.getBCollections()
      } else {
        this.searchPage()
      }
    },
    // eslint-disable-next-line
    cellStyleCb({ row, column, rowIndex, columnIndex }) {
      return 'long-text-hidden'
    },
    // 清空检索
    async backInit() {
      this.searchKeyword = ''
      this.keyword = ''
      this.tableData = []
      this.loading = true
      this.ResetEdit()
      this.loading = false
    },
    async onQueryChange(query) {
      this.searchKeyword = query.trim()
    },
    queryEdit() {
      if (this.keyword == '') {
        this.getBCollections()
      } else {
        this.searchPage()
      }
    },
    ResetEdit() {
      ;(this.input.dwmc = ''),
        (this.input.bgateway_name = ''),
        (this.input.collector_name = ''),
        (this.input.collector_power = ''),
        (this.input.tresult = ''),
        (this.input.hresult = '')

      ;(this.input1.dwmc = ''),
        (this.input1.bgateway_name = ''),
        (this.input1.collector_name = ''),
        (this.input2.dwmc = ''),
        (this.input2.bgateway_name = ''),
        (this.input2.collector_name = ''),
        (this.input3.dwmc = ''),
        (this.input3.bgateway_name = ''),
        (this.input3.collector_name = ''),
        (this.input4.dwmc = ''),
        (this.input4.bgateway_name = ''),
        (this.input4.collector_name = '')

      if (this.keyword == '') {
        this.getBCollections()
      } else {
        this.searchPage()
      }
    },
    plusEdit() {
      //增加查询条件--- +
      if (!this.plusValue.value1) {
        ;(this.input1.dwmc = ''),
          (this.input1.bgateway_name = ''),
          (this.input1.collector_name = ''),
          (this.plusValue.value1 = true)
        return
      }
      if (!this.plusValue.value2) {
        ;(this.input2.dwmc = ''),
          (this.input2.bgateway_name = ''),
          (this.input2.collector_name = ''),
          (this.plusValue.value2 = true)
        return
      }
      if (!this.plusValue.value3) {
        ;(this.input3.dwmc = ''),
          (this.input3.bgateway_name = ''),
          (this.input3.collector_name = ''),
          (this.plusValue.value3 = true)
        return
      }
      if (!this.plusValue.value4) {
        ;(this.input4.dwmc = ''),
          (this.input4.bgateway_name = ''),
          (this.input4.collector_name = ''),
          (this.plusValue.value4 = true)
        return
      }
    },
    minusEdit(data) {
      if (data == 1) {
        this.plusValue.value1 = false
        ;(this.input1.dwmc = ''), (this.input1.bgateway_name = ''), (this.input1.collector_name = '')
      } else if (data == 2) {
        this.plusValue.value2 = false
        ;(this.input2.dwmc = ''), (this.input2.bgateway_name = ''), (this.input2.collector_name = '')
      } else if (data == 3) {
        this.plusValue.value3 = false
        ;(this.input3.dwmc = ''), (this.input3.bgateway_name = ''), (this.input3.collector_name = '')
      } else if (data == 4) {
        this.plusValue.value4 = false
        ;(this.input4.dwmc = ''), (this.input4.bgateway_name = ''), (this.input4.collector_name = '')
      }
      if (this.keyword == '') {
        this.getBCollections()
      } else {
        this.searchPage()
      }
    },
  },
  filters: {
    // onLine(val) {
    //   if (val === 1) {
    //     return '是'
    //   }
    //   return '否'
    // },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30px;

  .header {
    display: flex;
    // justify-content: space-between;
    align-items: center;

    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 16px;
      font-weight: 500;
    }
  }

  .search {
    height: 52px;
    width: 100%;
    background: rgba(57, 99, 188, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 24px;
    margin-bottom: 24px;

    .search-tip {
      margin-left: 40px;
      height: 52px;
      line-height: 52px;
      color: #354058;
      font-size: 14px;

      .search-keyword {
        color: $theme;
      }

      .search-num {
        color: #f4516c;
      }
    }

    .search-back {
      margin: 8px 20px;
      height: 32px;
      background: #f4516c;
      border: none;
      border-radius: 2px;
      color: #fff;
      padding: 0 13px;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .table_1 .warning-row {
    background: oldlace;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }
}

.long-text-hidden {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>